@import 'qz/chart-elements'

$RED = #ecc
$BLUE = #cce

.item-body
	h2
		margin-bottom 0 !important

	p
		padding-top 10px !important

.right-column
	float right
	width 640px

.clearfix
	content ""
	display table
	clear both

.source-link, .last-updated
	white-space: nowrap

.president
	opacity 0.5

	&.clinton
		fill $BLUE

	&.bush
		fill #ecc

	&.obama
		fill $BLUE

	&.trump
		fill $RED

.term-start
	stroke $qz-gray-2
	stroke-width 1px

.president-label
	font-family $qz-sans
	fill #ccc
	opacity 1
	font-size 40px
	shape-rendering crispEdges
	alignment-baseline middle
	text-anchor middle

.recession-label
	font-family $qz-sans
	fill #ccc
	opacity 1
	font-size 40px
	shape-rendering crispEdges
	alignment-baseline middle
	text-anchor middle

.recession
	color black
	opacity 0.05

.zero-line
	stroke $qz-chart-gridline
	stroke-width 3px

.label-bubble
	fill $qz-background-gray

.label
	font-family $qz-sans-light
	fill $qz-chart-axis-text
	shape-rendering crispEdges
	// alignment-baseline middle

.lines path
	stroke: $qz-gray-3
	stroke-width: 2.5px
	fill: none

.source
	font-family $qz-sans
	color $qz-gray-2
	font-size 14px
	padding-right: 20px
	text-align: right
	padding-bottom: 20px

@media screen and (max-width 1200px)
	.recession-label
		font-size 24px

@media screen and (max-width 800px)
	.item-body
		h2, p
			padding-left 27.5px
			padding-right 27.5px

		h2
			margin-bottom 0 !important

		p
			padding-top 10px !important

	.right-column
		float none
		width 100%

	.recession
		display none

	.recession-label
		display: none

	.president-label
		font-size 20px

	.term-start
		stroke-width 0.5px

	.lines path
		stroke-width: 1.5px
